<template>
  <div class="goods">
    <div class="top-nav">
      <div class="my-order">我的订单</div>
      <div class="topNav">
        <div :class="current === 0 ? 'active' : ''" @click="getAllGoodsOrder()">
          全部订单
        </div>
        <div :class="current === 1 ? 'active' : ''" @click="getNoPayOrder()">
          待付款
        </div>
        <div :class="current === 2 ? 'active' : ''" @click="getArriveOrder()">
          待收货
        </div>
        <div :class="current === 3 ? 'active' : ''" @click="getFinishOrder()">
          已完成
        </div>
      </div>
    </div>
    <div class="goodsMain">
      <div v-if="current == 0">
        <div class="allOrder-item" v-for="(v, i) in allOrder" :key="i">
          <div class="order-status">
            <div class="pay">{{ v.pay }}</div>
            <div class="orderInfo">
              <div class="orderNum">订单号:{{ v.orderNum }}</div>
              <div>{{ v.time }}</div>
            </div>
          </div>
          <div class="order-content">
            <img :src="v.img" alt="" />
            <div class="order-right-info">
              <div class="goods-name">{{ v.name }}</div>
              <div>
                <span class="price">{{ v.price }}</span
                ><span class="num">X{{ v.num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 待付款 -->
      <div v-if="current == 1">
        <div class="allOrder-item" v-for="(v, i) in nopay" :key="i">
          <div class="order-status">
            <div class="pay">{{ v.pay }}</div>
            <div class="orderInfo">
              <div class="orderNum">订单号:{{ v.orderNum }}</div>
              <div>{{ v.time }}</div>
            </div>
          </div>
          <div class="order-content">
            <img :src="v.img" alt="" />
            <div class="order-right-info">
              <div class="goods-name">{{ v.name }}</div>
              <div>
                <span class="price">{{ v.price }}</span
                ><span class="num">X{{ v.num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 待收货 -->
      <div v-if="current == 2">
        <div class="allOrder-item" v-for="(v, i) in arriveOrder" :key="i">
          <div class="order-status">
            <div class="pay">{{ v.pay }}</div>
            <div class="orderInfo">
              <div class="orderNum">订单号:{{ v.orderNum }}</div>
              <div>{{ v.time }}</div>
            </div>
          </div>
          <div class="order-content">
            <img :src="v.img" alt="" />
            <div class="order-right-info">
              <div class="goods-name">{{ v.name }}</div>
              <div>
                <span class="price">{{ v.price }}</span
                ><span class="num">X{{ v.num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 已完成 -->
      <div v-if="current == 3">
        <div class="allOrder-item" v-for="(v, i) in finishOrder" :key="i">
          <div class="order-status">
            <div class="pay">{{ v.pay }}</div>
            <div class="orderInfo">
              <div class="orderNum">订单号:{{ v.orderNum }}</div>
              <div>{{ v.time }}</div>
            </div>
          </div>
          <div class="order-content">
            <img :src="v.img" alt="" />
            <div class="order-right-info">
              <div class="goods-name">{{ v.name }}</div>
              <div>
                <span class="price">{{ v.price }}</span
                ><span class="num">X{{ v.num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      //   全部订单
      allOrder: [
        {
          name: "高压洗车机家用高压水枪",
          orderNum: 1111225200025500225500,
          time: "2022-10-10 16:24:04",
          pay: "未付款",
          price: 500.0,
          num: 1,
          img: require("../../../assets/darling.jpg"),
        },
        {
          name: "高压洗车机家用高压水枪",
          orderNum: 1111225200025500225500,
          time: "2022-10-10 16:24:04",
          pay: "未付款",
          price: 500.0,
          num: 1,
          img: require("../../../assets/darling.jpg"),
        },
        {
          name: "高压洗车机家用高压水枪",
          orderNum: 1111225200025500225500,
          time: "2022-10-10 16:24:04",
          pay: "未付款",
          price: 500.0,
          num: 1,
          img: require("../../../assets/darling.jpg"),
        },
      ],
      //   待付款
      nopay: [
        {
          name: "高压洗车机家用高压水枪",
          orderNum: 1111225200025500225500,
          time: "2022-10-10 16:24:04",
          pay: "待付款",
          price: 500.0,
          num: 1,
          img: require("../../../assets/darling.jpg"),
        },
      ],
      // 待收货
      arriveOrder: [
        {
          name: "高压洗车机家用高压水枪",
          orderNum: 1111225200025500225500,
          time: "2022-10-10 16:24:04",
          pay: "待收货",
          price: 500.0,
          num: 1,
          img: require("../../../assets/darling.jpg"),
        },
      ],
      // 已完成
      finishOrder: [
        {
          name: "高压洗车机家用高压水枪",
          orderNum: 1111225200025500225500,
          time: "2022-10-10 16:24:04",
          pay: "已完成",
          price: 500.0,
          num: 1,
          img: require("../../../assets/darling.jpg"),
        },
      ],
    };
  },
  methods: {
    getAllGoodsOrder() {
      this.current = 0;
    },
    getNoPayOrder() {
      this.current = 1;
    },
    getArriveOrder() {
      this.current = 2;
    },
    getFinishOrder() {
      this.current = 3;
    },
  },
};
</script>

<style lang="scss" scoped>
.goods {
  padding-top: calc(25 / 1920 * 100vw);
  padding-bottom: calc(25 / 1920 * 100vw);
  background-color: #fff;
  .top-nav {
    display: flex;
    padding-left: calc(14 / 1920 * 100vw);
    padding-bottom: calc(15 / 1920 * 100vw);
    align-items: center;
    border-bottom: 1px solid #efeff1;
    div {
      margin-right: calc(43 / 1920 * 100vw);
    }
    .my-order {
      margin-left: calc(14 / 1920 * 100vw);
    }
    .topNav {
      display: flex;
      color: #1f1f1f;
      cursor: pointer;
      .active {
        border-bottom: calc(4 / 1920 * 100vw) solid #fd5151;
      }
    }
  }
  .top-nav::before {
    content: "";
    display: flex;
    width: calc(3 / 1920 * 100vw);
    height: calc(17 / 1920 * 100vw);
    background-color: #fd5151;
  }
  .goodsMain {
    .allOrder-item {
      margin-top: calc(34 / 1920 * 100vw);
      .order-status {
        background: #f5f5f5;
        padding: calc(14 / 1920 * 100vw) calc(27 / 1920 * 100vw);
        .pay {
          font-size: calc(14 / 1920 * 100vw);
          color: #fd5151;
        }
        .orderInfo {
          display: flex;
          font-size: calc(14 / 1920 * 100vw);
          margin-top: calc(14 / 1920 * 100vw);
          color: #a8a8a8;
          .orderNum {
            margin-right: calc(23 / 1920 * 100vw);
          }
        }
      }
      .order-content {
        display: flex;
        padding: calc(14 / 1920 * 100vw) calc(27 / 1920 * 100vw);
        img {
          width: calc(100 / 1920 * 100vw);
          height: calc(100 / 1920 * 100vw);
          border-radius: calc(2 / 1920 * 100vw);
          margin-right: calc(25 / 1920 * 100vw);
        }
        .order-right-info {
          margin-top: calc(13 / 1920 * 100vw);
          .goods-name {
            font-size: calc(16 / 1920 * 100vw);
            color: #1f1f1f;
            margin-bottom: calc(20 / 1920 * 100vw);
          }
          .price {
            font-size: calc(16 / 1920 * 100vw);
            color: #fd5151;
          }
          .num {
            font-size: calc(14 / 1920 * 100vw);
            color: #a8a8a8;
          }
        }
      }
    }
  }
}
</style>